<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('支付宝免押订单列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>订单状态：</label>
                            <select name="state" th:with="type=${@dict.getType('sys_used_auth_ali_state')}">
                                <option value="">所有</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </li>
                        <li>
                            <label style="width: 100px;">订单状态描述：</label>
                            <select name="stateDescription"
                                    th:with="type=${@dict.getType('sys_used_auth_state_ali_description')}">
                                <option value="">所有</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </li>

                        <li class="select-time">
                            <label>创建时间：</label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"
                                   name="startTime"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间"
                                   name="endTime"/>
                        </li>

                        <li>
                            <label style="width: 105px;">关键字查询字段：</label>
                            <select name="fields">
                                <option value="orderNumber" selected>租借订单号</option>
                                <option value="ticket">商家订单号</option>
                                <option value="authNo">授权号</option>
                                <option value="operationId">订单号</option>
                                <option value="storeName">租借门店名称</option>
                            </select>
                            <input type="text" name="keywords"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var isBackDatas = [[${@dict.getType('sys_used_is_back')}]];

    var stateDatas = [[${@dict.getType('sys_used_auth_state')}]];
    var stateDescriptionDatas = [[${@dict.getType('sys_used_auth_state_description')}]];

    var cancelFlag = [[${@permission.hasPermi('system:used:auth:cancel')}]];
    var requestPayFlag = [[${@permission.hasPermi('system:used:auth:requestPay')}]];


    var statusDatas = [[${@dict.getType('sys_used_status')}]];

    var prefix = ctx + "system/used";

    $(function () {
        var options = {
            url: prefix + "/ali.auth.list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "支付宝免押订单列表",
            // detailView: true,
            // onExpandRow: function (index, row, $detail) {
            //     initChildTable(index, row, $detail);
            // },
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '',
                    visible: false
                },
                {
                    field: 'orderNumber',
                    title: '租借订单号'
                },
                {
                    field: 'nickName',
                    title: '用户昵称',
                    formatter: function (value, row, index) {
                        var imagesUrl = "";
                        if (row.avatar != null && row.avatar != "") {
                            imagesUrl = $.table.imageView(row.avatar);
                        }
                        return imagesUrl + "&nbsp;" + row.nickName;
                    }
                },
                {
                    field: 'ticket',
                    title: '商家订单号'
                },
                {
                    field: 'authNo',
                    title: '授权号'
                },
                {
                    field: 'operationId',
                    title: '订单号'
                },
                {
                    field: 'amount',
                    title: '冻结金额'
                },
                {
                    field: 'storeName',
                    title: '租借门店名'
                },
                {
                    field: 'leaseState',
                    title: '租借状态',
                    formatter: function (value, row, index) {
                        // 租借状态 1 成功 2 失败 0 初始
                        var leaseStateMsg = "-";
                        if (row.leaseState == 1) {
                            leaseStateMsg = "<span style='color: black'>成功</span>";
                        } else if (row.leaseState == 2) {
                            leaseStateMsg = "<span style='color: red'>失败</span>";
                        } else if (row.leaseState == 0) {
                            leaseStateMsg = "<span>初始</span>";
                        }
                        return leaseStateMsg;
                    }
                },
                {
                    field: 'isBack',
                    title: '是否归还',
                    formatter: function (value, row, index) {
                        var isBackMsg = "";
                        // 是否归还 0 未归还 1 归还
                        if (row.isBack == 1) {
                            isBackMsg = "<span style='color: black;'>已归还</span>";
                        } else {
                            isBackMsg = "<span style='color: red;'>未归还</span>";
                        }
                        return isBackMsg
                    }
                },
                {
                    field: 'state',
                    title: '订单状态',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(stateDatas, value);
                    }
                },
                {
                    field: 'stateDescriptionDatas',
                    title: '订单状态描述',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(stateDescriptionDatas, value);
                    }
                },
                {
                    field: 'status',
                    title: '支付状态',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(statusDatas, value);
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (row.leaseState != 1) {
                            // 订单租借状态不为成功
                            if (row.state != 'REVOKED' && row.authNo == null) {
                                actions.push('<a class="btn btn-info btn-xs ' + cancelFlag + '" href="javascript:void(0)" onclick="cancel(\'' + row.id + '\')"><i class="fa fa-database"></i>解冻订单</a> ');
                            }
                        }
                        // 订单状态 0 待支付 1 已支付 2 已购买 3 已退款
                        if (row.status == 0 && row.isBack == 1) {
                            // 订单状态为待支付，可发起扣款
                            actions.push('<a class="btn btn-info btn-xs ' + requestPayFlag + '" href="javascript:void(0)" onclick="requestPay(\'' + row.id + '\')"><i class="fa fa-database"></i>发起扣款</a> ');

                            if (row.status != 4) {
                                actions.push('<a class="btn btn-info btn-xs ' + cancelFlag + '" href="javascript:void(0)" onclick="cancel(\'' + row.id + '\')"><i class="fa fa-database"></i>解冻订单</a> ');
                            }
                        }
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });


    // 微信免押撤销订单
    function cancel(id) {
        $.modal.confirm("确认要解冻该笔支付宝预授权订单吗?解冻之后将不可恢复", function () {
            var url = prefix + "/aliCancel";
            var data = {"id": id};
            $.operate.submit(url, "post", "json", data);
        });
    }

    // 支付宝发起扣款
    function requestPay(id) {
        var url = prefix + "/requestAliFreePay";
        var data = {"id": id};
        $.operate.submit(url, "post", "json", data);
    }
</script>
</body>
</html>